<template>
    <div class="container">
        <div class="pay-box">
            <div class="row1">收银：{{ ls.get('USER_INFO').userName }}</div>
            <div class="pay-content-box">
                <div class="left-box">
                    <el-radio-group v-model="form.actionType" @change="changeActionType">
                        <div class="group-box">
                            <div>
                                <!-- v-if="todo == 'orderChange'" -->
                                <el-radio-button :disabled="!discountCon || todo == 'vipUpgrade' || todo == 'mountPay' "
                                    :class="{ 'disabled': todo == 'vipUpgrade' || todo == 'mountPay' }"
                                    value="折扣优惠">折扣优惠</el-radio-button>
                            </div>
                            <div>
                                <el-radio-button :disabled="todo == 'vipUpgrade' || todo == 'mountPay' || !rounddownCon"
                                    :class="{ 'disabled': todo == 'vipUpgrade' || todo == 'mountPay' }"
                                    value="抹零">抹零</el-radio-button>
                            </div>
                            <div>
                                <el-radio-button :disabled="todo == 'vipUpgrade' || todo == 'mountPay' || !servicechargeCon"
                                    :class="{ 'disabled': todo == 'vipUpgrade' || todo == 'mountPay' }"
                                    value="服务费">服务费</el-radio-button>
                            </div>
                            <div>
                                <el-radio-button :disabled="todo == 'vipUpgrade' || todo == 'mountPay' || !supplyminconsumeCon"
                                    :class="{ 'disabled': todo == 'vipUpgrade' || todo == 'mountPay' }"
                                    value="补低消">补低消</el-radio-button>
                            </div>
                            <div class="line"></div>   
                            <div v-has-role="'order-checkout-wechat'">
                                <img class="img-pay" src="https://oss.jtmckj.com/pc/images/pay/pay-wx.png" alt="">
                                <el-radio-button class="pay-wx" value="微信支付">微信支付</el-radio-button>
                            </div>
                            <div  v-has-role="'order-checkout-alipay'">
                                <img class="img-pay" src="https://oss.jtmckj.com/pc/images/pay/pay-ali.png" alt="">
                                <el-radio-button class="pay-ali" value="支付宝支付">支付宝支付</el-radio-button>
                            </div>
                            <div  v-has-role="'order-checkout-cash'">
                                <img class="img-pay" src="https://oss.jtmckj.com/pc/images/pay/pay-cash.png" alt="">
                                <el-radio-button class="pay-cash" value="现金">现金</el-radio-button>
                            </div>
                            <div v-has-role="'order-checkout-pos'">
                                <img class="img-pay" src="https://oss.jtmckj.com/pc/images/pay/pay-pos.png" alt="">
                                <el-radio-button class="pay-pos" value="银联POS">银联POS</el-radio-button>
                            </div>
                            <div v-has-role="'order-checkout-membercard'">
                                <img class="img-pay" src="https://oss.jtmckj.com/pc/images/pay/pay-vip.png" alt="">
                                <el-radio-button class="pay-vip" :disabled="todo == 'vipUpgrade'"
                                    :class="{ 'disabled': todo == 'vipUpgrade' }" value="会员卡支付">会员卡支付</el-radio-button>
                            </div>
                            <div v-has-role="'order-checkout-other'">
                                <img class="img-pay" src="https://oss.jtmckj.com/pc/images/pay/pay-others.png" alt="">
                                <el-radio-button class="pay-others" value="其他支付" :disabled="todo == 'vipUpgrade' "
                                    :class="{ 'disabled': todo == 'vipUpgrade' }">其他支付</el-radio-button>
                            </div>
                            <div class="line"></div>
                            <div>
                                <el-radio-button :disabled="todo == 'vipUpgrade' || todo == 'mountPay'"
                                    :class="{ 'disabled': todo == 'vipUpgrade' || todo == 'mountPay' }"
                                    value="挂账">挂账</el-radio-button>
                            </div>
                            <div>
                                <el-radio-button :disabled=" todo == 'mountPay'"
                                    :class="{ 'disabled':  todo == 'mountPay' }"
                                    value="赠送">赠送</el-radio-button>
                            </div>
                            <div class="line"></div>
                            <div>
                                <el-radio-button :disabled="todo == 'vipUpgrade' || todo == 'mountPay'"
                                    :class="{ 'disabled': todo == 'vipUpgrade' || todo == 'mountPay' }"
                                    value="团购券">团购券</el-radio-button>
                            </div>
                            <div>
                                <el-radio-button value="聚合支付">聚合支付</el-radio-button>
                            </div>
                        </div>
                    </el-radio-group>
                </div>
                <div class="right-box">
                    <div class="pay-title-box">
                        <div class="pay-title">{{ form.actionType }}</div>
                        <div class="pay-unpay" v-if="vipInfo.priceType == '1'">应付金额：￥{{ price }}</div>
                        <div class="pay-unpay" v-else-if="vipInfo.priceType == '2'">应付金额：￥{{ vipPrice }}</div>
                    </div>

                    <Sale v-if="form.actionType == '折扣优惠' && discountCon" ref="SaleRef" :tableInfo="tableInfo" :saleData="saleData"
                        :payData="payData" :form="form" :price="price" :yhje="yhje" :unpay="unpay"
                        @focusForm="handleFocusForm" />
                    <Tip v-if="form.actionType == '服务费' && servicechargeCon" ref="TipRef" :tableInfo="tableInfo" :saleData="saleData"
                        :payData="payData" :form="form" :price="price" :yhje="yhje" @focusForm="handleFocusForm" />
                    <Cut v-if="form.actionType == '抹零' && rounddownCon" ref="CutRef" :tableInfo="tableInfo" :saleData="saleData"
                        :payData="payData" :form="form" :price="price" :yhje="yhje" :unpay="unpay"
                        @focusForm="handleFocusForm" />
                    <!-- <Min v-if="form.actionType == '补低消' && supplyminconsumeCon" ref="MinRef" :tableInfo="tableInfo" :saleData="saleData"
                        :payData="payData" :form="form" :price="price" :yhje="yhje" :unpay="unpay"
                        @focusForm="handleFocusForm" /> -->

                    <Wechat v-if="form.actionType == '微信支付'" ref="WechatRef" :tableInfo="tableInfo" :received="received"
                        :form="form" :price="price" :unpay="unpay" :payData="payData" :saleData="saleData"
                        :details="details" @focusForm="handleFocusForm" @keyupEnter="keyboardComfirm" />
                    <Ali v-if="form.actionType == '支付宝支付'" ref="AliRef" :tableInfo="tableInfo" :received="received"
                        :form="form" :price="price" :unpay="unpay" :payData="payData" :saleData="saleData"
                        :details="details" @focusForm="handleFocusForm" @keyupEnter="keyboardComfirm" />
                    <Cash v-if="form.actionType == '现金'" ref="CashRef" :tableInfo="tableInfo" :received="received"
                        :form="form" :price="price" :unpay="unpay" :payData="payData" :saleData="saleData"
                        :details="details" @focusForm="handleFocusForm" />
                    <Pos v-if="form.actionType == '银联POS'" ref="PosRef" :tableInfo="tableInfo" :received="received"
                        :form="form" :price="price" :unpay="unpay" :payData="payData" :saleData="saleData"
                        :details="details" @focusForm="handleFocusForm" />
                    <Vip v-show="form.actionType == '会员卡支付'" ref="VipRef" :tableInfo="tableInfo" :received="received"
                        :form="form" :price="price" :vipPrice="vipPrice" :unpay="unpay" :payData="payData"
                        :saleData="saleData" :details="details" :vipInfo="vipInfo" :marketUser="marketUser" :marketUserName="marketUserName"  @focusForm="handleFocusForm" />
                    <Others v-if="form.actionType == '其他支付'" ref="OthersRef" :tableInfo="tableInfo" :received="received"
                        :form="form" :price="price" :unpay="unpay" :payData="payData" :saleData="saleData"
                        :details="details" @focusForm="handleFocusForm" />

                    <Credit v-if="form.actionType == '挂账'" ref="CreditRef" :tableInfo="tableInfo" :received="received"
                        :form="form" :price="price" :unpay="unpay" :payData="payData" :saleData="saleData"
                        :details="details" @focusForm="handleFocusForm" />
                    <Send v-if="form.actionType == '赠送'" ref="SendRef" :tableInfo="tableInfo" :received="received"
                        :form="form" :price="price" :unpay="unpay" :payData="payData" :saleData="saleData"
                        :details="details" @focusForm="handleFocusForm" />

                    <Group v-if="form.actionType == '团购券'" ref="GroupRef" :tableInfo="tableInfo" :received="received"
                        :form="form" :price="price" :unpay="unpay" :payData="payData" :saleData="saleData"
                        :details="details" @focusForm="handleFocusForm" />
                    <Poly v-if="form.actionType == '聚合支付'" ref="PolyRef" :tableInfo="tableInfo" :received="received"
                        :form="form" :price="price" :unpay="unpay" :payData="payData" :saleData="saleData"
                        :details="details" @focusForm="handleFocusForm" />

                    <div class="queue-box">
                        <div class="queue-right-btn">
                            <div class="btn-items">
                                <div class="item" @click="handleNum('1')">1</div>
                                <div class="item" @click="handleNum('2')">2</div>
                                <div class="item" @click="handleNum('3')">3</div>
                                <div class="item spe" style="margin-right: 0;" @click="handleDelLastNum()"></div>
                            </div>
                            <div class="btn-items">
                                <div class="item" @click="handleNum('4')">4</div>
                                <div class="item" @click="handleNum('5')">5</div>
                                <div class="item" @click="handleNum('6')">6</div>
                                <div class="item" style="margin-right: 0;" @click="handleDelNum()">删除</div>
                            </div>
                            <div class="btn-items">
                                <div class="item" @click="handleNum('7')">7</div>
                                <div class="item" @click="handleNum('8')">8</div>
                                <div class="item" @click="handleNum('9')">9</div>
                                <div class="item">取消</div>
                            </div>
                            <div class="btn-items">
                                <div class="item" @click="handleNum('0')">0</div>
                                <div class="item" @click="handleNum('.')">.</div>
                                <div class="item item-comfirm" style="margin-right: 0;" @click="keyboardComfirm()">确认</div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="textarea">
            <el-input v-model="form.remard" type="textarea" :rows="3" placeholder="请输入买单备注" @focus="focusForm('remard')"
                @blur="blurForm" clearable />
        </div>
        <el-button class="submit" @click="handleSubmit">结账</el-button>
    </div>
</template>

<script setup>
import useConfigStore from '@/store/config'
import { formatDecimal } from "@/utils/chenhao";

import Sale from "./payment_sale.vue";
import Tip from "./payment_tip.vue";
import Cut from "./payment_cut.vue";
import Min from "./payment_min.vue";
import Wechat from "./payment_wechat.vue";
import Ali from "./payment_ali.vue";
import Cash from "./payment_cash.vue";
import Pos from "./payment_pos.vue";
import Vip from "./payment_vip.vue";
import Others from "./payment_others.vue";
import Credit from "./payment_credit.vue";
import Send from "./payment_send.vue";
import Group from "./payment_group.vue";
import Poly from "./payment_poly.vue";
import ls from "@/lib/ls";
import { getLocalIPv4 } from "@/utils/getip.js";
import Api from "@/api";
const configStore = useConfigStore()
const router = useRouter();

// 接收父组件参数 props
const props = defineProps({
    tableInfo: {
        type: Object,
        required: false,
    },
    saleData: {
        type: Array,
        required: false,
    },
    payData: {
        type: Array,
        required: false,
    },
    price: {
        type: String,
        required: false,
    },
    receive: {
        type: String,
        required: false,
    },
    received: {
        type: String,
        required: false,
    },
    unpay: {
        type: String,
        required: false,
    },
    vipPrice: {
        type: String,
        required: false,
    },
    vipInfo: {
        type: Object,
        required: false,
    },
    marketUser: {
        type: String,
        required: false,
    },
    marketUserName: {
        type: String,
        required: false,
    },
});
const price = toRef(props, "price");
const receive = toRef(props, "receive");
const received = toRef(props, "received");
const unpay = toRef(props, "unpay");
const tableInfo = toRef(props, "tableInfo");
const saleData = toRef(props, "saleData");
const payData = toRef(props, "payData");
const vipPrice = toRef(props, 'vipPrice')
const vipInfo = toRef(props, 'vipInfo')
const marketUser = toRef(props, 'marketUser')
const marketUserName = toRef(props, 'marketUserName')


const emit = defineEmits(["emitSubmit"]);

const todo = router.currentRoute.value.query.todo
const cardNo = router.currentRoute.value.query.cardNo

let form = ref({
    actionType: todo == 'orderChange' ? "折扣优惠" : "微信支付",
    saleType: "按金额优惠",
    payAmt: unpay.value, salaAmt: "",
    salaPercent: "",
    finalAmt: "",
    authCode: "",
    giveChangeAct: "",
    isGiveAct: "0",
    notGiveChange: "",
    payCode: "",
    gzr: "",
    mobile: "",
    send_remark: "",
    tgqm: "",
    remark: "",
    serviceAmt: [],
});

// ---------------------------------------换菜---------------------------------------
let oldItemCode = ``
let contentData = ``
let details = ref([])
if (todo && todo == 'orderChange') {
    form.value = {
        consumeCode: tableInfo.value.consumeCode,
    }
    oldItemCode = router.currentRoute.value.query.oldItemCode
    contentData = JSON.parse(router.currentRoute.value.query.contentData)
    // console.log('contentData :>> ', contentData);
    details.value = oldItemCode.split(',')
}

const resetForm = (params) => {
    if (todo && todo == 'orderChange') {
        form.value.consumeCode = tableInfo.value.consumeCode;
    }
    form.value.actionType = form.value.actionType;
    form.value.salaAmt = "";
    form.value.payAmt = unpay.value;
    form.value.authCode = "";
    form.value.giveChangeAct = "";
    form.value.isGiveAct = "0";
    form.value.notGiveChange = ""
    form.value.payCode = "";
    form.value.gzr = "";
    // form.value.mobile = "";
    form.value.remark = "";
    form.value.tgqm = "";
    form.value.ticketName = ""
    form.value.ticketCode = ""
};

// 切换操作按钮
const changeActionType = (v) => {
    resetForm();
    // console.log('form.value.actionType :>> ', form.value.actionType);
    if (form.value.actionType == "折扣优惠") {
        form.value.saleType = "按金额优惠";
    } else if (form.value.actionType == "服务费") {
        form.value.saleType = "按固定金额";
    } else if (form.value.actionType == "抹零") {
        form.value.saleType = "正向抹零";
    } else if (form.value.actionType == "其他支付") {
        // form.value.payType_btnType = "招待";
    } else if (form.value.actionType == "团购券") {
        form.value.payType_btnType = "美团券";
    }
};

// --------------------------------------------计算属性---------------------------------------
// ----------------计算优惠金额------------------
const yhje = computed(() => {
    // console.log('form.value.saleType :>> ', form.value.saleType);
    if (form.value.actionType == "折扣优惠") {
        if (form.value.saleType == "按金额优惠") {
            if (!form.value.salaAmt) return;
            return formatDecimal(form.value.salaAmt);
        } else if (form.value.saleType == "按折扣优惠") {
            if (form.value.salaPercent > 0 && form.value.salaPercent <= 10) {
                return formatDecimal(
                    price.value - price.value * (form.value.salaPercent * 0.1)
                );
            }
        } else if (form.value.saleType == "输入付款金额") {
            if (form.value.finalAmt) {
                return formatDecimal(price.value - form.value.finalAmt);
            }
        }
    } else if (form.value.actionType == "服务费") {
        if (form.value.saleType == "按固定金额") {
            if (!form.value.salaAmt) return;
            return formatDecimal(form.value.salaAmt);
        } else if (form.value.saleType == "按百分比") {
            if (form.value.salaPercent > 0) {
                return formatDecimal(
                    price.value * (form.value.salaPercent * 0.01)
                );
            }
        }
    } else if (form.value.actionType == "抹零") {
        if (form.value.saleType == "正向抹零") {
            if (!form.value.salaAmt) return;
            return formatDecimal(form.value.salaAmt);
        }
    } else if (form.value.actionType == "补低消") {
        if (!form.value.salaAmt) return;
        return formatDecimal(form.value.salaAmt);
    }
});


// 虚拟键盘确定
const SaleRef = ref();
const TipRef = ref();
const CutRef = ref();
const MinRef = ref();
const WechatRef = ref();
const AliRef = ref();
const CashRef = ref();
const PosRef = ref();
const VipRef = ref();
const OthersRef = ref();
const CreditRef = ref();
const SendRef = ref();
const GroupRef = ref();
const PolyRef = ref();

const keyboardComfirm = async (params) => {
    if(configStore.payFlag){
        ElNotification({
            title: "提示",
            message: "支付中。请稍等",
            type: "warning",
        });
        return
    }
    // console.log('form.value :>> ', form.value);
    // 左边是 折扣优惠
    if (form.value.actionType == "折扣优惠") {
        if (!yhje.value) return;
        SaleRef.value.handleKeyboardConfirm();
    } else if (form.value.actionType == "服务费") {
        if (!yhje.value) return;
        TipRef.value.handleKeyboardConfirm();
    } else if (form.value.actionType == "抹零") {
        if (!yhje.value) return;
        // if (!CutRef.value.handleKeyboardConfirm(yhje.value)) return
        CutRef.value.handleKeyboardConfirm();
    } else if (form.value.actionType == "补低消") {
        if (!yhje.value) return;
        MinRef.value.handleKeyboardConfirm();
    } else if (form.value.actionType == "微信支付") {
        // configStore.payFlag = true // 支付开关
        WechatRef.value.handleKeyboardConfirm();
    } else if (form.value.actionType == "支付宝支付") {
        // configStore.payFlag = true // 支付开关
        AliRef.value.handleKeyboardConfirm();
    } else if (form.value.actionType == "现金") {
        // configStore.payFlag = true // 支付开关
        CashRef.value.handleKeyboardConfirm();
    } else if (form.value.actionType == "银联POS") {
        // configStore.payFlag = true // 支付开关
        PosRef.value.handleKeyboardConfirm();
    } else if (form.value.actionType == "会员卡支付") {
        // configStore.payFlag = true // 支付开关
        VipRef.value.handleKeyboardConfirm();
    } else if (form.value.actionType == "其他支付") {
        // configStore.payFlag = true // 支付开关
        OthersRef.value.handleKeyboardConfirm();
    } else if (form.value.actionType == "挂账") {
        // configStore.payFlag = true // 支付开关
        CreditRef.value.handleKeyboardConfirm();
    } else if (form.value.actionType == "赠送") {
        // configStore.payFlag = true // 支付开关
        SendRef.value.handleKeyboardConfirm();
    } else if (form.value.actionType == "团购券") {
        // configStore.payFlag = true // 支付开关
        GroupRef.value.handleKeyboardConfirm();
    } else if (form.value.actionType == "聚合支付") {
        // configStore.payFlag = true // 支付开关
        PolyRef.value.handleKeyboardConfirm();
    }
    // console.log('form.value :>> ', form.value);
    // console.log('saleData :>> ', saleData);
    // console.log('payData :>> ', payData);
};
watch(configStore.ispaying,(newValue,oldValue)=>{
    console.log(newValue);
    configStore.payFlag = false; // 确保在所有操作完成后再设置为 false
})
// 数字键盘操作
// let keyboard = ref(false)
let input = ref("");
const focusForm = (str) => {
    // keyboard.value = true
    input.value = str;
};
const blurForm = (params) => {
    // keyboard.value = false
};
// 点击数字
const handleNum = (str) => {
    if (
        form.value[input.value] &&
        form.value[input.value].indexOf(".") !== -1 &&
        str === "."
    )
        return;
    form.value[input.value] += str;
    // 判断是储值方案
};
const handleDelLastNum = () => {
    form.value[input.value] = form.value[input.value].slice(
        0,
        form.value[input.value].length - 1
    );
};
const handleDelNum = () => {
    form.value[input.value] = "";
};

// 子组件focus input
const handleFocusForm = (str) => {
    focusForm(str);
};



//获取ip地址
const ip = ref("");
getLocalIPv4()
    .then((ipAddress) => {
        // 在这里处理获取到的 IP 地址
        ip.value = ipAddress;
        console.log("IP 地址:", ip.value);
    })
    .catch((error) => {
        console.error("发生错误:", error);
        // 在这里处理错误情况
    });


// 点击结账
const handleSubmitFlag = ref(false)
const handleSubmit = async () => {
    console.log(tableInfo.value);
    if (unpay.value != 0) return ElNotification({
        title: '提示',
        message: '还有剩余金额未完成支付，请核对后再操作',
        type: 'warning',
    })
    if (receive.value > received.value) return ElNotification({
        title: '提示',
        message: '已收小于应收，无法结账',
        type: 'warning',
    })
    if(receive.value != received.value ){
        const cashItems = payData.value.filter(item => item.zffs === '现金');
        // 计算这些元素的 notGiveChange 属性的总和
        const totalNotGiveChange = cashItems.reduce((sum, item) => {
            if (item.notGiveChange) {
                return sum + Number(item.notGiveChange);
            }
            return sum;
        }, 0);
        console.log(totalNotGiveChange);
        if((totalNotGiveChange + Number(receive.value)) != Number(received.value)){
            ElNotification({
                title: '提示',
                message: '收款金额与应收金额不符',
                type: 'warning',
            }) 
            return 
        }
    } 
    // if (selectWares.value.length <= 0)
    //     return ElNotification({
    //         title: "提示",
    //         message: "未选择商品",
    //         type: "warning",
    //     });
    if(handleSubmitFlag.value){
        ElNotification({
            title: '提示',
            message: '加载中，请稍等',
            type: 'warning',
        }) 
        return 
    }
    handleSubmitFlag.value = true
    // 换菜
    if (todo && todo == 'orderChange') {
        orderChange()
    }
    else if (todo == 'vipUpgrade') {
        vipUpgrade()
    }
    else if (todo == 'mountPay') {
        handleSubmitFlag.value = false
        router.back()
    }
};

// 换菜
const orderChange = async (params) => {
    let itemCodeList = []
    contentData = { ...contentData, ip: ip.value };
    await Api.Common.PcObjProcess.Do({ functionName: "OpPayBatchChangeGoods", contentData })
        .then(res => {
            console.log('换菜res :>> ', res);
            itemCodeList = res.newGoods.map(item => {
                return item.itemCode
            })
            ElNotification({
                title: '提示',
                message: '换菜成功',
                type: 'success',
            })
        })
    let data = {
        payBatchCode: tableInfo.value.payBatchCode,
        itemCodeList: itemCodeList.join(','),
    };
    Api.Common.PcObjProcess.Do({ functionName: "Checkout", orgCode: "0004", contentData: data, }).then((res) => {
        console.log("调用点击结账接口 res:>> ", res);
        // ElNotification({
        //     title: "提示",
        //     message: "结账成功",
        //     type: "success",
        // });
        // 清除缓存
        ls.remove('orderChange')
        router.push({
            path: "/order/orderTable",
        });
        contentData = { ...contentData, payDetail: [...payData.value], serviceDetail: [...saleData.value] };
        Api.Common.PcObjProcess.Do({
            functionName: "ChangeGoodPrint",
            contentData,
        }).then((res) => {
            //console.log('调用点击结账接口 res:>> ', res);
            handleSubmitFlag.value = false
            ElNotification({
                title: "提示",
                message: "打印成功",
                type: "success",
            });
        });
        // emit("emitSubmit", "emitSubmit");
    });
}

// 会员升级
const vipUpgrade = (params) => {
    const data = {
        cardNo: cardNo,
    }
    // console.log('会员升级 data :>> ', data);
    Api.Common.PcObjProcess.Do({ "functionName": "UpdateMemberLevel", "contentData": data })
        .then(res => {
            console.log('会员升级 res :>> ', res);
            ElNotification({
                title: "提示",
                message: "会员升级成功",
                type: "success",
            });
            handleSubmitFlag.value = false
            // emit("emitSubmit", "emitSubmit");
            router.back()
        })
}
const discountCon = ref(false)
const rounddownCon = ref(false)
const servicechargeCon = ref(false)
const supplyminconsumeCon = ref(false)
// 获取支付权限
const getUserMenuButton = () => {
    Api.Common.PcObjProcess.Do({ "functionName": "GetUserMenuButton", "contentData": { obj: ""}})
        .then(res => {
            console.log(res.result);
            discountCon.value = res.result.some(p => p.name == "order-checkout-discount") //折扣优惠
            rounddownCon.value = res.result.some(p => p.name == "order-checkout-rounddown") //抹零权限
            servicechargeCon.value = res.result.some(p => p.name == "order-checkout-servicecharge") //服务费权限
            supplyminconsumeCon.value = res.result.some(p => p.name == "order-checkout-supplyminconsume") //补低消
        })
}
getUserMenuButton();


onMounted(() => {
    if(ls.get('RevepaytradeNo')) {
        form.value.actionType = '聚合支付'
    }
})
</script>

<style scoped lang="scss">
/* 在这里编写组件的CSS样式 */
.container {
    margin-left: 20px;
    // width: 560px;
    // height: 830px;
    // background: #FFFFFF;
    // border-radius: 8px;

    .pay-box {
        width: 600px;
        height: 658px;
        background: #ffffff;
        border-radius: 8px;
        padding: 19px 21px;

        .row1 {
            font-family: Microsoft YaHei;
            font-weight: 400;
            font-size: 20px;
            color: #212121;
        }

        .pay-content-box {
            margin-top: 15px;
            display: flex;
            justify-content: space-between;

            // width: 100%;
            // height: 500px;
            .left-box {
                .group-box {
                    .line {
                        // width: 120px;
                        height: 6px;
                        background: #e6e6e6;
                    }

                    div:first-child {
                        ::v-deep {
                            .el-radio-button__inner {
                                border-radius: 8px 8px 0px 0px;
                            }
                        }
                    }

                    div:last-child {
                        ::v-deep {
                            .el-radio-button__inner {
                                border-radius: 0px 0px 8px 8px;
                                border: 0;
                            }
                        }
                    }
                }

                ::v-deep {
                    // .el-radio-group {
                    //     display: block;
                    // }

                    .el-radio-button {
                        .el-radio-button__inner {
                            width: 120px;
                            height: 40px;
                            line-height: 40px;
                            border-radius: 0px;
                            border: 0;
                            background: #fafafa;
                            border-bottom: 1px solid #e6e6e6;
                            font-weight: 400;
                            font-size: 16px;
                            color: #212121;
                            padding: 0;
                        }
                    }

                    .pay-wx {
                        .el-radio-button__inner {
                            padding-left: 15px;
                        }
                    }

                    .pay-ali {
                        .el-radio-button__inner {
                            padding-left: 30px;
                        }
                    }

                    .pay-cash {
                        .el-radio-button__inner {
                            padding-left: 0px;
                        }
                    }

                    .pay-pos {
                        .el-radio-button__inner {
                            padding-left: 20px;
                        }
                    }

                    .pay-vip {
                        .el-radio-button__inner {
                            padding-left: 30px;
                        }
                    }

                    .pay-others {
                        .el-radio-button__inner {
                            padding-left: 15px;
                        }
                    }

                    .is-active {
                        .el-radio-button__inner {
                            background: #fffbe5;
                            color: #ff6a00;
                        }
                    }
                }
            }

            .right-box {
                width: 100%;
                position: relative;
                margin-left: 20px;

                .pay-title-box {
                    width: 100%;
                    height: 40px;
                    background: #e6e6e6;
                    border-radius: 8px 8px 0px 0px;
                    display: flex;
                    justify-content: space-between;
                    align-items: center;
                    padding-left: 20px;
                    padding-right: 16px;

                    .pay-title {
                        font-family: Microsoft YaHei;
                        font-weight: bold;
                        font-size: 18px;
                        color: #212121;
                        line-height: 40px;
                    }

                    .pay-unpay {
                        font-family: Microsoft YaHei;
                        font-weight: 400;
                        font-size: 16px;
                        color: #212121;
                        line-height: 40px;
                    }
                }
            }
        }
    }

    .textarea {
        margin-top: 15px;
        margin-bottom: 25px;
        height: 72px;

        ::v-deep {
            .el-textarea__inner {
                border-radius: 8px;
                border: 0;
                font-size: 16px;
                color: #999999;
                resize: none;
            }
        }
    }

    .submit {
        width: 100%;
        height: 60px;
        background: #ff6a00;
        border-radius: 8px;
        font-weight: 400;
        font-size: 24px;
        color: #ffffff;
    }
}

.queue-box {
    position: absolute;
    bottom: 0px;
    // right: 0px;

    .queue-right-btn {
        margin-top: 20px;

        .btn-items {
            display: flex;
            // align-items: center;
            // justify-content: space-between;
            margin-bottom: 12px;

            .item {
                cursor: pointer;
                width: 95px;
                height: 48px;
                text-align: center;
                background: #e6e6e6;
                border-radius: 8px;
                font-family: Microsoft YaHei;
                font-weight: 400;
                font-size: 20px;
                color: #212121;
                line-height: 48px;
                margin-right: 12px;

                &.spe {
                    background-image: url("https://oss.jtmckj.com/pc/images/queue/i_btn_del.png");
                    background-size: 38px 28px;
                    background-repeat: no-repeat;
                    background-position: center;
                }
            }

            .item-comfirm {
                width: 200px;
                background: #ffd400;
            }
        }

        :last-child {
            margin-bottom: 0px;
        }
    }
}

.disabled {
    opacity: 0.3;
}

.img-pay {
    width: 20px;
    height: 20px;
    position: absolute;
    z-index: 1;
    margin-top: 10px;
    margin-left: 8px;
}</style>
